import QtQuick 1.0

Rectangle {
    id: startmenu
    width: 640
    height: 360
    gradient: Gradient {
             GradientStop { position: 0.0; color: "steelblue" }
             GradientStop { position: 1.0; color: "lightblue" }
    }

    signal sendQMLMessage(int messageID)
    signal sendExitMessage()
    signal sendRumbleMessage(int rumbleMessage) // rumbleMessage is ignored actually
    // this signal, when received from mygraphicsscene.cpp, initiates animation of the UI.
    // The animation is not started automatically because startmenu.width and .height may change on different devices (see mygraphicsscene.cpp)
    signal beginAnimation()
    onBeginAnimation:{
        rectangleMovement1.start();
        rectangleMovement2.start();
        rectangleMovement3.start();
    }

    Text {
        id: helloText
        text: "<p>Trap, shake,<br />kill 'em</p>"
        y: 30
        anchors.horizontalCenter: startmenu.center
        font.pixelSize: Math.floor(startmenu.height/8); font.bold: true

    }

    Rectangle {
        id: startGame
        width: startmenu.width/3
        height: startmenu.width/6
        gradient: Gradient {
                 GradientStop { position: 0.0; color: "gold" }
                 GradientStop { position: 1.0; color: "darkorange" }
        }
        border.color: "black"
        border.width: 2
        radius: 40
        //anchors.right: startmenu.right
        //anchors.bottom: startmenu.bottom
        x: startmenu.width - startGame.width-startGame.border.width - 3
        y: startmenu.height

        SequentialAnimation on y {
            id: rectangleMovement1
            running: false
            PauseAnimation { duration: 1000 }
            PropertyAnimation { to: startmenu.height-startGame.height-startGame.border.width - 3; duration: 1200; easing.type: Easing.OutElastic}
        }
        Text{
            id: startGameText
            text: "Start game!"
            anchors.horizontalCenter: startGame.horizontalCenter
            anchors.verticalCenter: startGame.verticalCenter
            font.pixelSize: Math.floor(startmenu.height/12); font.bold: false
        }
        MouseArea {
                 anchors.fill: parent
                 // when clicked, send a one
                 onClicked: {
                     startmenu.sendRumbleMessage(1) // 1 is dummy
                     startmenu.sendQMLMessage(1)
                 }//console.log("button clicked")
        }
    }

    Rectangle {
        id: endGame
        width: startmenu.width/6
        height: startmenu.width/6
        gradient: Gradient {
                 GradientStop { position: 0.0; color: "crimson" }
                 GradientStop { position: 1.0; color: "maroon" }
        }
        border.color: "black"
        border.width: 2
        radius: 40
        x: 0+startGame.border.width + 3
        y: startmenu.height
        SequentialAnimation on y {
            id: rectangleMovement2
            running: false
            PauseAnimation { duration: 1600 }
            PropertyAnimation { to: startmenu.height-endGame.height-startGame.border.width - 3; duration: 1200; easing.type: Easing.OutElastic}
        }
        //anchors.left: startmenu.left
        //anchors.bottom: startmenu.bottom
        Text{
            id: endGameText
            text: "Quit!"
            anchors.horizontalCenter: endGame.horizontalCenter
            anchors.verticalCenter: endGame.verticalCenter
            font.pixelSize: startGameText.font.pixelSize; font.bold: false
        }
        MouseArea {
                 anchors.fill: parent
                 // when clicked, send a zero
                 onClicked: {
                     startmenu.sendRumbleMessage(1) // 1 is dummy
                     startmenu.sendExitMessage()//console.log("button clicked")
                 }
        }
    }

    Rectangle {
        id: instr
        width: startmenu.width/3
        height: startmenu.width/6
        gradient: Gradient {
                 GradientStop { position: 0.0; color: "limegreen" }
                 GradientStop { position: 1.0; color: "lime" }
        }
        border.color: "black"
        border.width: 2
        radius: 40
        x: startmenu.width - instr.width-startGame.border.width - 3
        y: -instr.height - 3
        SequentialAnimation on y {
            id: rectangleMovement3
            running: false
            PauseAnimation { duration: 500 }
            PropertyAnimation { to: startGame.border.width + 3; duration: 1200; easing.type: Easing.OutElastic}
        }
        Text{
            id: instrText
            text: "Help!"
            anchors.horizontalCenter: instr.horizontalCenter
            anchors.verticalCenter: instr.verticalCenter
            font.pixelSize: startGameText.font.pixelSize; font.bold: false
        }
        MouseArea {
                 anchors.fill: parent
                 // when clicked, send a zero
                 onClicked: {
                     insertextbox.state = 'moved';
                     startmenu.sendRumbleMessage(1); // 1 is dummy

                 }
        }
    }

    Rectangle {
        id: insertextbox
        width: startmenu.width/1.5
        height: insertextboxText.paintedHeight
        border.color: "black"
        border.width: 2
        gradient: Gradient {
                 GradientStop { position: 0.0; color: "limegreen" }
                 GradientStop { position: 1.0; color: "lawngreen" }
        }
        x: startmenu.width + insertextbox.border.width
        y: -insertextbox.height - insertextbox.border.width
        Text{
            id: insertextboxText
            width: insertextbox.width
            wrapMode: Text.Wrap
            text: "Use both thumbs to create a trap on screen. Catch an enemy in the trap and shake the device for a kill! Don't kill the friendly U.F.O:s though! The circle at the top right corner indicates how many traps remain by getting smaller in diameter after each deployed trap. Segments of the circle are also eaten away by time! <br /> Images: ESA/NASA http://www.spacetelescope.org/"
            anchors.fill: insertextbox
            //anchors.verticalCenter: instr.verticalCenter
            font.pixelSize: Math.floor(startGameText.font.pixelSize*0.8); font.bold: false
        }
        MouseArea {
                anchors.fill: parent
                onPressed: insertextbox.state = 'original';
                //onReleased: myRect.state = '';
            }
        states: [
            State {
                name: "original";
                PropertyChanges { target: insertextbox; x: startmenu.width+insertextbox.border.width + 3; y:-startmenu.height-insertextbox.border.width - 3; color: "blue" }
            },
            State {
                name: "moved"
                PropertyChanges { target: insertextbox; x: startmenu.width-insertextbox.width-insertextbox.border.width - 3; y: insertextbox.border.width - 3; color: "orange" }
            }
        ]
        transitions: [
                Transition {
                    NumberAnimation { properties: "x,y"; duration: 300; easing.type: Easing.OutBack }
                }
            ]
    }
}
